<script>
import { ref, watchEffect } from 'vue'
import oaMenuForm from './oa-menu-form.vue'

export default {
    components: {
        oaMenuForm
    },
    props: {
        modular: {
            type: String,
            default: 'edit'
        },
        subItem: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props, { emit }) {
        const menuFormEditRef = ref(null)
        const menuFromPopupRef = ref(null)

        const form = ref({
            name: '',
            type: 'view',
            url: '',
            appid: '',
            pagepath: ''
        })

        watchEffect(() => {
            if (Object.keys(props.subItem).length !== 0) {
                for (const key in form.value) {
                    form.value[key] = props.subItem[key]
                }
            }
        })

        const handleRules = async () => {
            // let result = await menuFormEditRef.value.$refs.menuFormRef.validate()

            // console.log(result, ' result')
            if (props.modular === 'edit') {
                emit('edit', { ...form.value })
            } else {
                emit('add', { ...form.value })
            }
            menuFromPopupRef.value.close()
            menuFormEditRef.value.$refs.menuFormRef.resetFields()
        }

        return {
            menuFormEditRef,
            menuFromPopupRef,
            form,
            handleRules
        }
    }
}
</script>

<template>
    <popup ref="menuFromPopupRef" async :clickModalClose="false" :title="`${modular === 'add' ? '新增' : '编辑'}子菜单`" @confirm="handleRules">
        <oa-menu-form ref="menuFormEditRef" modular="secondary" v-model:name="form.name" v-model:visitType="form.type" v-model:url="form.url" v-model:appId="form.appid" v-model:pagePath="form.pagepath"></oa-menu-form>
        <template #trigger>
            <slot></slot>
        </template>
    </popup>
</template>
